import React from "react";
import { Card, Statistic } from 'antd';
import CountUp from 'react-countup';
import * as IconMould from "@ant-design/icons";
import './Scss/HomeTopStatistics.scss'

/**
 * @date: 2024-07-19 13:41:38
 * @description: 统计动画
 * @modifyContent:
 * @author: Forever丿顾北
**/

const formatter = (value) => <CountUp end={value} separator="," />;
/**
 * @date: 2024-07-19 12:53:25
 * @description: 动态获取icon
 * @modifyContent:
 * @author: Forever丿顾北
**/
const IconItems = (name) => React.createElement(IconMould[name])
const HomeTopStatistics =  ({ countData }) => {
  return (
    <div className="home_top_statistics_box">
      {
        countData.map((item, index) => {
          return (
            <Card hoverable key={index}>
              <div className="left_box" style={{color: item.color}}>{IconItems(item.icon)}</div>
              <div className="right_box"style={{color: item.color}}>
                <h4>{item.name}</h4>
                <Statistic prefix="¥" value={item.value} formatter={formatter} precision={0} valueStyle={{
                  fontWeight: 'bold',
                  fontSize: '1.4rem'
                }}/>
              </div>
            </Card>
          )
        })
      }
    </div>
    
  )
}
export default HomeTopStatistics;